// 子组件
<template>
  <div>
    我是子组件
  </div>
</template>

<script>

export default {
  data () {
    return {}
  },
  mounted () {
    this.$nextTick(() => {
      window.addEventListener('message', this.handleMessage)

      // 告诉父组件准备好接收消息了
      window.parent.postMessage({
        cmd: 'ready-for-receiving'
      }, '*')
    })
  },
  destroyed () {
      // 注意移除监听！注意移除监听！注意移除监听！
      window.removeEventListener('message', this.handleMessage)
  },
  methods: {
    handleMessage (event) {
      // 根据上面制定的结构来解析 iframe 内部发回来的数据
      const data = event.data
      switch (data.cmd) {
        case 'doSomething':
          // 业务逻辑
          break
      }
    }
  }
}
</script>